<template>
  <div class="product-list">
    <template v-if="viewMode === 'grid'">
      <div class="product-grid">
        <ProductCard
          v-for="product in products"
          :key="product.id"
          :product="product"
          class="grid-item"
        />
      </div>
    </template>

    <!-- 空状态 -->
    <el-empty
      v-if="!loading && products.length === 0"
      description="暂无產品"
      :image-size="200"
    />
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import ProductCard from './ProductCard.vue'

// 接收 props
defineProps({
  products: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  total: {
    type: Number,
    default: 0
  },
  loading: {
    type: Boolean,
    default: false
  },
  viewMode: {
    type: String,
    default: 'grid'
  }
});
</script>

<style scoped>
.product-list {
  background: #2c3e50;
  border-radius: 8px;
  overflow: hidden;
  min-height: 400px;
}

/* 网格布局 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 2fr));
  gap: 20px;
  padding: 20px;
}

/* 网格项 */
.grid-item {
  height: 100%;
  transition: transform 0.2s ease;
}

.grid-item:hover {
  transform: translateY(-2px);
}


/* 响应式设计 */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
  }

}
</style>
